<template>
  <div class="container">
    <div class="banner" v-if="bannerImageUrl!=undefined&&bannerImageUrl!=''">
      <img :src="bannerImageUrl" style="width: 95%"/>
    </div>
    <div class="advertisement-list" v-if="advertisements !=undefined && advertisements.length > 0">
      <div style=" display: flex;flex-direction: row;width: 100%">
        <div style="display: flex;flex-direction: column;text-align: center;flex: 1;margin: 5% 5% 4% 5%;"
             v-for="(advertisement,index) in advertisements">
          <div style="flex: 1;background: #F7F7F7;border-radius: 2px;padding: 15px">
            <img :src="[advertisement.image]" style="display: block;margin: auto;width:100px;height: 65px"/>
          </div>
          <span style="color: #42578E;font-size: 14px;margin-top: 3px">{{advertisement.title}}</span>
          <span style="color: #F29360;font-size: 12px;margin-top: 3px">{{advertisement.subtitle}}</span>
        </div>
      </div>
    </div>
    <span
      style="justify-content: center;text-align: center;padding: 8px;color:#3399EB;font-size: 14px;margin-left: 0px">查看更多</span>
  </div>
</template>

<script>
  import BunnerImgUrl from '@/assets/image/banner_fund_product.png'

  export default {
    name: 'HelloWorld',
    props: ['advertisements', 'bannerImageUrl'],
    data () {
      return {
        bannerImageUrlss: BunnerImgUrl
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 0px 0px 0px 0px;
    background: white;
  }

  .advertisement-list {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .advertisement-list::after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    top: 0px;
    background: #F8F8F8;
    position: relative;
  }

  .banner {
    background: white;
    display: block;
    justify-content: center;
    text-align: center;
    margin-left: 0px;
    padding-top: 10px;
  }

  .banner::after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    top: 5px;
    background: #F8F8F8;
    position: relative;
  }
</style>
